import React, {Component} from 'react';
// 高阶函数
import {connect} from 'react-redux'
import {getCityNameCreate} from '../../store/actionCreator'

import indexCss from './index.module.scss'
class Index extends Component{
    componentDidMount(){
        // 获取城市名称
        this.props.getCityName()
    }
    render(){
        return(
            <div className={indexCss.city_content}>
                <div className={indexCss.city_left}>
                    <div className={indexCss.city_label}>{this.props.cityName}</div>
                    <div className={indexCss.city_input}>
                    <i className="iconfont icon-seach"></i>
                    <span>请输入小区或地址</span>
                    </div>
                </div>
                <div className={indexCss.city_right}>
                <i className="iconfont icon-map"></i>
                </div>
            </div>
        )
    }
}
// 映射对象,将仓库中的数据映射到组件的属性中
const mapStateToProps=(state)=>({
    cityName:state.mapReducer.cityName
})
const mapDispatchToProps=(dispatch)=>({
    getCityName(){
        // 派发通知给管理员
        dispatch(getCityNameCreate())
    }
})
export default connect(mapStateToProps,mapDispatchToProps)(Index)